<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>View</title>
    <script src="jquery/jquery-1.11.2.js"></script>
    <script src="underScore/underscore.js"></script>
    <script src="backbone-min.js"></script>
</head>
<body>
<div id="search_container"></div>

<script type="text/template" id="search_template">
    <label><%= search_label %></label>
    <input type="text" id="search_input" />
    <input type="button" id="search_button" value="Search" />
</script>

<script>
    (function ($) {
        //此处添加下面的试验代码
        var SearchView = Backbone.View.extend({
            el: "#search_container",

            initialize: function(){
//                alert('init a SearchView');
                this.render({search_label: "搜索按钮"});
            },
            render:function(context){
                var template = _.template($('#search_container').html());
                $(this.el).html(template(context));
            },
            events:{  //就是在这里绑定的
                //定义类型为button的input标签的点击事件，触发函数doSearch
                'click input[type=button]' : 'doSearch'
            },
            doSearch: function(event){
                alert("search for " + $("#search_input").val());
            }
        });
        var searchView = new SearchView({el: $("#search_container")});
//        searchView.render({search_label: "搜索渲染"});
    })(jQuery);
</script>
</body>
</html>